import React, {Component} from 'react';
import {withRouter,Link} from 'react-router-dom'
import $ from 'jquery'
import echarts from 'echarts'
import 'ant-design-pro/dist/ant-design-pro.css'; // 统一引入样式
import { MiniArea ,Pie, yuan} from 'ant-design-pro/lib/Charts';
import {
    G2,
    Chart,
    Geom,
    Axis,
    Tooltip,
    Coord,
    Label,
    Legend,
    View,
    Guide,
    Shape,
    Facet,
    Util
  } from "bizcharts";
import moment from 'moment';
// import data from "./mock.json";

import "../../static/data/data.styl"
import u from '../../common.js'
import $http from '../../common.js'

//第一个图表
const visitData = [];
const beginDay = new Date().getTime();
for (let i = 0; i < 20; i += 1) {
  visitData.push({
    x: moment(new Date(beginDay + (1000 * 60 * 60 * 24 * i))).format('YYYY-MM-DD'),
    y: Math.floor(Math.random() * 100) + 10,
  });
}

//第二个图表
const salesPieData = [
    {
      x: '舆情',
      y: 54799,
    },
    {
      x: '案件',
      y: 44835,
    },
    {
      x: '情报',
      y: 24908,
    },
  ]

//   波点图
const colorMap = {
    Asia: G2.Global.colors[0],
    Americas: G2.Global.colors[1],
    Europe: G2.Global.colors[2],
    Oceania: G2.Global.colors[3]
  };

export default class Data extends React.Component{
    constructor(props){
        super(props)
        this.state={
            data:'',
            cols:'',
            allData:'',//数据总额
            yuqing:'',//舆情数量
            anjian:'',//案件
            qingbao:'',//情报
            carrier:[],//饼图的数据来源
        }
    }
    componentWillMount (){
       
        let that=this
        $.getJSON("http://g.alicdn.com/bizcharts-material/assets/0.0.1/point-bubble-mock.json", (data)=>{
                        
            let  cols = {
                LifeExpectancy: {
                  alias: "人均寿命（年）"
                },
                Population: {
                  type: "pow",
                  alias: "人口总数"
                },
                GDP: {
                  alias: "人均国内生产总值($)"
                },
                Country: {
                  alias: "国家/地区"
                }
              };
              that.setState({
                  data:data,
                  cols:cols,
              })
            })
    }
      
   //饼图
   analysis = async () => {
    let pieData = echarts.init(window.document.getElementById('pie'));
    window.onresize = function () {
        pieData.resize();
    }
        // 饼图数据
        u.dataStatistics({
            aggsType:"terms",
            aggsField:"judgeType",
            judgeType:'all',
            aggsSize:20,
            size:0,
          }, data => {
            let num=[],type=[],sum=[];
            for(let i=0;i<data.aggs.length;i++){
              num.push(data.aggs[i].count);
              switch (data.aggs[i].key){
                case "0":
                  type.push("舆情");
                  break;
                case "1":
                  type.push("案件");
                  break;
                case "2":
                  type.push("情报");
                  break;
                default:
                  type.push("未知");
                  break;
              }
            }
            for(let i=0;i<type.length;i++){
              sum.push({value:num[i],name:type[i]})
            }
            this.setState({
              carrier:sum,
            },()=>{
              this.pie();
            })
          });
  };
   pie = async () => {
       
    let pieData= echarts.init(window.document.getElementById('pie'));
    pieData.setOption({
      tooltip: {
         show:"true",
         formatter:'{b} : {c} \n ({d}%)'
      },
      color:['#3385ff', '#f9ab22','#5ad354'],
      legend: {
          orient: 'vertical',
          y2: 'bottom',
          data:['舆情','案件','情报'],
          itemGap:40,
         height:50,
         itemWidth:8,
         itemHeight:8,
      },
      series: [
          {
              
              type:'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap:true,
              label: {
                  normal: {
                      show: false,
                      position: 'center'
                  },
                  emphasis: {
                      show: false,
                      textStyle: {
                          fontSize: '30',
                          fontWeight: 'bold'
                      }
                  }
              },
              labelLine: {
                  normal: {
                      show: true
                  }
              },
              data:this.state.carrier,
          }
      ]
    })
  }
  componentDidMount() {
    this.pie();
    this.analysis();
    //数据统计接口
    u.dataStatistics({
        aggsType:"terms",
        aggsField:"judgeType",
        judgeType:'all',
        aggsSize:20,
        size:0,
   
    },data=>{
        this.setState({
            allData:data.total,
            yuqing:data.aggs[0].count,
            anjian:data.aggs[1].count,
            qingbao:data.aggs[2].count
        })
    })
  }
  
  render(){
     
      return(
          <div className="containerData">
             <div className="left">
                <div className="top">
                  <p>数据统计情况</p>
                </div>
                <div className="center">
                    <ul className="data-ul">
                        <li>
                            <img src={require('../../static/image/logo_all.png')} 
                                 style={{width:'26px',height:"26px",marginRight:"15%"}}
                            alt=""/>
                            <div className="ul-right">
                                <h3>{this.state.allData}</h3>
                                <span>数据总额</span>
                            </div>
                        </li>
                        <li>
                            <img src={require('../../static/image/icon_sentiment.png')} 
                                 style={{width:'26px',height:"26px",marginRight:"15%"}}
                            alt=""/>
                            <div className="ul-right">
                                <h3>{this.state.yuqing}</h3>
                                <span>疑似舆情数量</span>
                            </div>
                        </li>
                        <li>
                            <img src={require('../../static/image/icon_case.png')} 
                                 style={{width:'26px',height:"26px",marginRight:"15%"}}
                            alt=""/>
                            <div className="ul-right">
                                <h3>{this.state.anjian}</h3>
                                <span>疑似案件数量</span>
                            </div>
                        </li>
                        <li>
                            <img src={require('../../static/image/icon_intelligence.png')} 
                                 style={{width:'26px',height:"26px",marginRight:"15%"}}
                            alt=""/>
                            <div className="ul-right">
                                <h3>{this.state.qingbao}</h3>
                                <span>疑似情报数量</span>
                            </div>
                        </li>
                    </ul>
                    {/* 波点图表 */}
                    <Chart style={{height:"90%",width:"80%",marginTop:"5%"}} data={this.state.data} scale={this.state.cols} forceFit>
                        <Tooltip showTitle={false} />
                       
                        <Legend reversed />
                        <Geom
                            type="point"
                            position="GDP*LifeExpectancy"
                            color={[
                            "continent",
                            val => {
                                return colorMap[val];
                            }
                            ]}
                            tooltip="Country*Population*GDP*LifeExpectancy"
                            opacity={0.65}
                            shape="circle"
                            size={["Population", [4, 65]]}
                            style={[
                            "continent",
                            {
                                lineWidth: 1,
                                strokeOpacity: 1,
                                fillOpacity: 0.3,
                                opacity: 0.65,
                                stroke: val => {
                                return colorMap[val];
                                }
                            }
                            ]}
                        />
                     </Chart>
                </div>
             </div>
             <div className="right">
                <div className="top">
                  <p>监测情况预测</p>
                </div>
                <div className="rightCenter">
                   <p style={{marginBottom:"2%"}}>目标评估</p>
                   <h2>有望达到预期</h2>
                    <MiniArea
                        line
                        color="#cceafe"
                        height={98}
                        data={visitData}
                    />
                    <p>数据研判几率</p>
                    {/* <Pie
                        hasLegend
                        title="总额"
                        subTitle="总额"
                        total={() => (
                        <span
                            dangerouslySetInnerHTML={{
                            __html:salesPieData.reduce((pre, now) => now.y + pre, 1)
                            }}
                            style={{fontSize:"22px",fontFamily:"1234567890-Regular",color:"#3f484f"}}
                        />
                        )}
                        data={salesPieData}
                        height={294}
                    /> */}
                    <div className="total">
                          <h2>{this.state.allData}</h2>
                          <span>总额</span>
                       </div>
                    <div id="pie" style={{width:"300px",height:"300px",marginLeft:"13%"}}>
                       
                    </div>
                </div>
            </div>
          </div>
          
      );
  }
} 